<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法
    // 基本语法：
    // 1.赋值运算符 = 左侧的 {} 用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量
    // 2.对象的属性值将被赋值与属性名[相同的]变量
    // 3.注意解构的变量名不要和外面的变量名冲突否则报错
    // 4.对象中找不到与变量名一致的属性时变量值为undefined


    // 对象解构
    // const obj = {
    //   uname: 'cxk',
    //   age: 18
    // }
    // 解构的语法
    // const uname = 'li'  等价于const uname = obj.uname  错误的  解构的变量名不要和外面的变量名冲突
    // const { uname, age, color1 } = { uname: 'cxk', age: 18, color: 'yellow' }
    // console.log(uname)  // cxk
    // console.log(age)  // 18
    // console.log(color1)  // undefined  对象中找不到与变量名一致的属性时变量值为undefined

    // 1.对象解构的变量名 可以重新改名    什么值:赋值给谁
    // const { uname: username, age, color1 } = { uname: 'cxk', age: 18 }
    // // console.log(uname)  // 报错
    // console.log(username)  // cxk
    // console.log(age)  // 18

    // 2.解构数组对象
    // const pig = [
    //   {
    //     uname: '佩奇',
    //     age: 6
    //   }
    // ]
    // const [{ uname, age: pigage }] = pig
    // console.log(uname)  // 佩奇
    // console.log(pigage)  // 6
  </script>
</body>

</html>